<template>
    <h3>vue3里为我们导出一个 watch 函数</h3>
    <h3>我们可以使用它vue3里导出的watch函数 {{counter}}</h3>
</template>

<script>
  import {ref, watch} from 'vue'

  export default {
    name: "03.watch响应式",
    props: {},
    setup() {
      const counter = ref(0)

      /**
       * watch 函数接收三个参数
       *    1. 想要观察侦听的 响应式数据, 或者一个 getter 函数
       *    2. 一个回调函数. 比如我们可以传入我们一个想要根据变化调用 api 的函数.
       *    3. 一个可选的配置选项.
       */
      watch(counter, () => {
        console.log('the counter is ---->>', counter.value);
      }, {})

      console.log('修改之前的 counter ------>>>', counter.value);
      setTimeout(() => {
        counter.value = 6
      }, 1000)
      return {
        counter
      }
    }
  }
</script>

<style scoped>

</style>
